Описание проблемы и цели

При работе над каждым новым проектом тратишь время на создание элементов интерфейса и стилей с нуля. Если использовать чужие готовые решения, то необходимо время на адаптацию и согласование. Поэтому основная цель — ускорить собственную работу и оптимизировать взаимодействие с разработчиками

Исследование

Провел анализ действующих дизайн-систем и доступных UI-китов из Figma Community, выделил для себя удачные и неудачные решения, минимальный набор компонентов и требований.

UPD. По итогам использования библиотеки на нескольких проектах, а также работы с дизайн-системой международного инвестиционно-банковского холдинга появилось понимание как можно сделать ее еще более гибкой и масштабируемой

Результат

Сейчас в Figma Community доступна вторая версия Palka UI. Работа над новой версией еще не завершена, но уже понятно, как она будет работать. Поэтому далее показываю процесс и принципы работы дизайн-системы

Цвет

Цветовая система состоит из двух уровней:

• Палитра (примитивы) — набор исходных цветов с оттенками;
• Семантические токены — цвета на основе их ролей (для текста, фонов, границ и т.д.)

По умолчанию палитра скрыта, а семантические токены применяются к соответствующим слоям. При необходимости можно настроить под свои задачи.

На бесплатном тарифе используем для каждой темы свою коллекцию и переключаемся между ними с помощью плагина Swap Variables. На платном тарифе удобнее использовать нативное переключение тем через токены

Типографика

По умолчанию используем для web Onest, а для Android и IOS нативные шрифты — Roboto и SF Pro Display соответственно.

Для каждого параметра стиля текста используем свою размерную сетку. Название токена получается путем умножения числа 5 на предполагаемый размер. Например, 12*5=60, 14*5=70 и так далее. Для каждой группы параметров свои размеры.

На бесплатном тарифе используем для каждой темы свой набор стилей и переключаемся между ними с помощью плагина Swapper. На платном тарифе удобнее использовать плагин Themer и опубликованные библиотеки стилей

Тени

Тень — мощный инструмент, который добавляет реалистичности и глубины в дизайн, а также помогает распознавать иерархию элементов. На бесплатном тарифе используем для каждой темы свой набор стилей и переключаемся между ними с помощью плагина Swapper. На платном тарифе удобнее использовать нативное переключение тем через токены

Иконки

Используем Phosphor. Основной принцип — если используем stroke, то тогда лучше чтобы иконки были разных размеров, если fill, то можно попробовать просто менять их размер. Используем Union, чтобы цвет не менялся при swap.

Чтобы понять что перед нами стандартная иконка, используем необычный вариант и название placeholder.

Пока в процессе наполнения иконками, которые непосредственно используются в компонентах

Размеры

Базовый модуль интерфейса — 8px. Плюс есть два подмодуля 4px и 2px. На их основе строятся типографика, элементы интерфейса и отступы между ними, а также размеры иконок. Все это делает дизайн более предсказуемым, упрощает выбор размеров и ускоряет перевод дизайна в код.

В названии использую умножение на 5. Например, значение 4, а имя «20», значение 8, а имя «40», значение 16, а имя «80». Это чуть проще чем абстрактные.

Точка роста — использовать для размеров и расстояний модуль 16px, чтобы для масштабирования размеров использовать множитель, по примеру кода. Например, size.100 * 0.5 = 8px, size.100 * 2.75 = 36px и т. д.